import React, { useEffect, useState } from "react";
import { View, Image } from "@tarojs/components";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { AtToast } from "taro-ui";

import api from "@api/api.js";
import "./index.less";
export default (props) => {
  const [id, setId] = useState([]);
  const [list, setList] = useState([]);
  const [toast, setToast] = useState({ text: "", isOpened: false });
  useEffect(() => {
    getExpertList();
    const id = getCurrentInstance().router.params.id;
    setId(id);
  }, []);
  // 获取专家列表
  const getExpertList = async () => {
    const { data } = await api.getExpertList();
    setList(data);
  };
  // 邀请专家
  const inviteExperts = async (paramId) => {
    const {code,data:{payPackage}} = await api.inviteExperts({ expertsId: paramId }, id);
    if(code==200){
      Taro.requestPayment({
        timeStamp: payPackage.timeStamp,
        nonceStr: payPackage.nonceStr,
        package:payPackage.packageValue,
        signType: payPackage.signType,
        paySign: payPackage.paySign,
        success: function (res) {
          setToast({
            text: '支付成功',
            isOpened: true,
          });
        },
        fail: function (res) { }
      })
    }
    console.log(data);
  };
  return (
    <View className="bgBox">
      <AtToast {...toast}></AtToast>
      {list.map((item) => {
        return (
          <View className="listBox at-row at-row__align--center">
            <View className="header at-col at-col-1 at-col--auto">
              <Image src={item.headimgurl} />
            </View>
            <View className="text at-col">
              <View className="name">
                <View className="fontBold">{item.name}</View>
                <View className="font">{item.positionDesc}</View>
              </View>
              <View className="font">{item.hospital}</View>
              <View className="font">擅长领域：{item.expertise}</View>
            </View>
            <View className="at-col at-col-1 at-col--auto">
              <View
                className="btn"
                onClick={() => {
                  inviteExperts(item.id);
                }}
              >
                ￥{item.consultPrice} 咨询
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
};
